<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定</title>
</head>
<body>
<!--示例1: 直接属性绑定 -->
<button id="btn1">点击我 (属性绑定)</button>
<!-- 示例2: addEventListener绑定-->
<button id="btn2">点击我 (addEventListener)</button>
<!-- 示例3: 移除事件监听器 -->
<button id="btn3">点击我(可移除)</button>

<button id="removeBtn">移除btn3的事件</button>
<script>


    // 示例1: 直接属性绑定
    const btn1 = document.getElementById('btn1');
    btn1.onclick = function () {
        console.log('属性绑定的事件触发了!');
    };

    // 示例2: 使用addEventListener绑定
    const btn2 = document.getElementById('btn2');
    btn2.addEventListener('click', function () {
        console.log('addEventListener绑定的事件触发了!');
    });

    // 示例3: 绑定并移除事件监听器
    const btn3 = document.getElementById('btn3');

    function handleClick() {
        console.log('btn3的事件触发了!');
    }

    btn3.addEventListener('click', handleClick);

    const removeBtn = document.getElementById('removeBtn');
    removeBtn.addEventListener('click', function () {
        btn3.removeEventListener('click', handleClick);
        console.log('btn3的事件已被移除!');
    });
</script>
</body>
</html>

